<!DOCTYPE html>
<html lang="en" ng-app="ldtageditor">
	<head>
		<meta charset="UTF-8">
		<title>LDTagEditor</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
        <script src="app.js"></script>
	</head>
	<body ng-controller="MainController as main" style="background: url('background.jpg') no-repeat fixed; background-size: 100% auto; background-color: #000;">
		<div class="tokenEditor" ng-hide="main.dialog">
     <div style="padding: 20px; font-size: 18px; font-weight: 800; text-align: center; width: 100%;"><img src="title_logo.png" height="80" /> </div>
      <div style="padding: 20px;">
      <div ng-if="main.token.uid" style="background-color: #fcfcfc; padding: 20px; border-radius: 10px; margin-bottom: 10px;">
        <div class="form-group">
          <label>UID:</label>
          <input type="text" class="form-control" ng-model="main.token.uid" readonly>
        </div>
        <div class="form-group">
          <label>Type:</label><br>
          <label class="radio-inline">
            <input type="radio" name="type" ng-model="main.token.character" ng-value="true">
            Character
          </label>
          <label class="radio-inline">
            <input type="radio" name="type" ng-model="main.token.character" ng-value="false">
            Vehicle/Gadget
          </label>
        </div>
        <div>
          <label>ID:</label>
          <select ng-model="main.token.id" class="form-control" ng-options="char.id as char.name for char in main.charmap" ng-show="main.token.character"></select>
          <select ng-model="main.token.id" class="form-control" ng-options="token.id as token.name for token in main.tokenmap" ng-hide="main.token.character"></select>
        </div>
        <div ng-hide="main.token.character">
          <label class="checkbox-inline" style="margin-top: 10px;">* = rebuild</label>
          <label class="checkbox-inline" style="margin-top: 10px;"><input type="checkbox" ng-model="main.token.maxUpgrades">Full Upgrades</label>
        </div>
      </div>
      <div>
        <button class="btn btn-lg btn-primary" ng-click="main.readToken(main.token)" style="float: left;" ng-style="main.token.uid && {'width':'49%'} || {'width': '100%'}">Read</button>
         <button class="btn btn-lg btn-success" ng-click="main.writeToken(main.token)" style="float: left; width: 49%; margin-left: 2%;" ng-if="main.token.uid">Write</button>
      </div>
      </div>
		</div>
		<div class="overlay" ng-show="main.dialog" style="text-align: center; color: #fff;">
      <div style="padding: 20px; font-size: 18px; font-weight: 800; text-align: center; width: 100%;"><img src="nfc_tag.png" height="200" /> </div>
			<div style="padding: 20px; font-size: 18px; font-weight: 800;">Please place phone on token</div>
			<button class="btn btn-danger" ng-click="main.cancel()">Cancel</button>
		</div>
		<div class="ntag" ng-init="main.tagType='ntag213'" ng-show="main.dialog == 'write'" style="padding: 20px; color: #FFF;">
			<label class="radio-inline"><input type="radio" ng-model="main.tagType" value="ntag213">NTAG213</label>
			<br>
			<label class="radio-inline"><input type="radio" ng-model="main.tagType" value="ntag215">NTAG215</label> <span style="color: red; font-weight: bold">EXPIREMENTAL</span>
			<br>
			<label class="radio-inline"><input type="radio" ng-model="main.tagType" value="ntag216">NTAG216</label> <span style="color: red; font-weight: bold">EXPIREMENTAL</span>
		</div>
	</body>
</html>